<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王者荣耀</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        *{margin: 0;padding: 0}
        .title{text-align: center ;color:royalblue;margin-top: 30px}
        ul{margin: 20px auto;text-align: center;width: 1200px;}
        .heade ul li{list-style: none;float: left;font-size: 20px;
                width: 100px;background:gray;margin-bottom: 20px;height: 40px}
        .heade ul li a{text-decoration: none;margin-bottom: 20px;font-size: 20px;line-height: 40px;color: aliceblue}
        .heade ul li:hover{background: darkgray}
        .heade .{{ con_type }} {
            background: red;
        }

        .talk{width: 1200px;margin: 5px auto;text-align: right;padding-right: 50px}
        .talk a{text-decoration: none;font-size: 15px;margin-left: 15px}

        .content{width:1200px;background:rgb{{ color }} ;margin: 10px auto;height: auto;
            overflow: hidden;border: 2px deepskyblue solid;border-radius: 2%}
        .text{margin-top: 15px}
        .text p{margin-left: 20px}
        .subject h2{margin-left: 20px;margin-top: 20px}

        .uname{width:1200px;margin-right: 100px}
        .uname,.time p{margin-left: 1000px}

    {#    分页符#}
        .paging{width: 1200px;margin: 10px auto;text-align: center}
    </style>
</head>
<body>

    <div class="title"><h1>{{ c_type }}论谈吧</h1></div>
    <div class="heade">
        <ul>
            <li><a href="/">首页</a></li>
            {% for s in con_style %}
            <li class="{{ s.s_ename }}"><a href="{% url 'app:content' s.s_ename 1  %}">{{ s.s_name }}</a></li>
            {% endfor %}
            <li><a href="/app/register">注册</a></li>

            <li><a href="/app/mine">{{ uname }}</a></li>

        </ul>
    </div>

    <div class="talk">
        {% if utoken %}
        <a href="{% url 'app:write' con_type %}">我要扯淡</a>
        {% else %}
        <a href="{% url 'app:login' %}">我要扯淡</a>
        {% endif %}
        <a href="/app/outlogin/">{{ out }}</a></div>

{#    内容#}
    {% for w in page %}
    <div class="content">
        <div class="subject"><h2>{{ w.title }}</h2></div>
        <div class="text"><p>观点：{{ w.text }}</p></div>
        <div class="uname"><p>用户：{{ w.uname }}</p></div>
        <div class="time"><p>时间：{{ w.time }}</p></div>
    </div>
    {% endfor %}

{#      分页符#}
    <div class="paging">
        <nav aria-label="Page navigation">
          <ul class="pagination pagination-lg">
{#          上一页#}
            <li>
{#            判断是否有上一页#}
                {% if page.has_previous %}
                    <a href="{% url 'app:content' con_type page.previous_page_number %}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                {% else %}
                    <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                {% endif %}

            </li>
{#          中间分页列表#}
              {% for p in pagerange %}
                  {% ifequal p currentpage %}
                    <li class="active"><a href="{% url 'app:content' con_style p %}">{{ p }}</a></li>
                  {% else %}
                  <li ><a href="{% url 'app:content' con_type p %}">{{ p }}</a></li>
                  {% endifequal %}
              {% endfor %}
{##}
{##}
{##}
            <li>
                {% if page.has_next %}
                  <a href="{% url 'app:content' con_type page.next_page_number %}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                {% else %}
                    <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>

                {% endif %}
            </li>
          </ul>
        </nav>
    </div>

</body>
</html>